<html>

<head>
  <meta charset="utf-8">
  <title>线动画</title>
  <script src='../w3d.js' type="text/javascript"></script>
  <script src='../config.js' type="text/javascript"></script>
  <script src='../../lib/lil-gui.umd.min.js' type="text/javascript"></script>
  <script type="text/javascript">

    let engine, scene, canvas, body,geometry,samplerOffset,samplerWidth,channelPixel;
    function init () {
      canvas = document.getElementById('canvas');
      body = document.getElementById('body');
     let path=[
        `../../demo/pub/assets/skybox/twilight/pos-x.jpg`,
        `../../demo/pub/assets/skybox/twilight/neg-x.jpg`,
        `../../demo/pub/assets/skybox/twilight/pos-y.jpg`,
        `../../demo/pub/assets/skybox/twilight/neg-y.jpg`,
        `../../demo/pub/assets/skybox/twilight/pos-z.jpg`,
        `../../demo/pub/assets/skybox/twilight/neg-z.jpg`
        ]
      engine = new w.Engine({auth,
        canvas: canvas,
        contextmunu:false,//是否支持右键菜单
        background: path,
        environment: path,
        intensity: 1,
        ambientColor:"#ffffff",
        ambientIntensity:1.0
      });
      engine.init(this.initGPU);
    }
    function initGPU () {
      scene=engine.scene;
      scene.orbit.maxPitch=Math.PI/3;//限制操作相机的orbit组件的最大倾斜角度。
      initCamera();//初始化相机姿态
      addMesh();//添加点
      addAnimation('none');
      initGUI();
    }
    function initCamera(){
      let camera = engine.scene.getCamera()
      camera.near = 0.1;
      camera.far = 1000;
      camera.trans.position=[0,0,5];
    }
    function addMesh () {
      let url='../pub/assets/arrow.png';
      let vex = new Float32Array([//单线段
        -0.5, -0.5, 0,
        -0.5, -0.5, 0,
        0, -0.3, 0,
        0.3, -.9, 0,
        0.5,0.7,0,
        -0.7, 0.7, 0,
        -0.7, 0.7, 0,
        0.7, -0.5, 0,
      ]);
      geometry = new w.geometry.LineGeometry({ 
        position: vex, 
        capCount: 10,
        lineJoint: 'round',//round圆角miter尖角bevel平角
        lineWidth: 10, 
        map_uvPixel: 10,//单个贴图所占像素
        map_uvOffset: [0, 0]//贴图偏移
      })
      let material = new w.material.BasicMaterial({ 
        color: "#ffffff", //材质颜色
        map: url,
        blending: "NormalBlending"
      });
      let comp = new w.component.Mesh({ material, geometry , visibility: true });
      let entity = new w.Object3D({position: [0,0,0], maxInstanceNum: 1, disablePick: false});
      entity.addComponent(comp)
      scene.addEntity(entity);
    }
    function addAnimation(easing){
        let animation=new w.animation.Animation({id:"line",loop:0});
        //offset
        samplerOffset=new w.animation.Sampler([0,3], [[0,0],[-5,0]],"LINEAR", easing);
        let channelOffset=new w.animation.Channel(geometry,"map_uvOffset");
        channelOffset.add(samplerOffset);
        animation.add(channelOffset);
        //width
        samplerWidth=new w.animation.Sampler([0,2,3], [10,20,10],"LINEAR", easing);
        let channelWidth=new w.animation.Channel(geometry,"lineWidth");
        channelWidth.add(samplerWidth);
        animation.add(channelWidth);
        //uvPixel
        samplerPixel=new w.animation.Sampler([0,2,3], [10,20,10],"LINEAR", easing);
        let channelPixel=new w.animation.Channel(geometry,"map_uvPixel");
        channelPixel.add(samplerPixel);
        animation.add(channelPixel);
        scene.addAnimation(animation);
    }

    function initGUI(){
        const GUI = lil.GUI;
        const gui = new GUI();
        let folder = gui.addFolder('animation');
        folder.add(samplerOffset, 'easing', easing);
        folder.add(samplerWidth, 'easing', easing);
        folder.add(samplerPixel, 'easing', easing);
    }

  </script>
  <style>
    html,
    body,
    #canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body onload="init()">
  <canvas id="canvas"></canvas>
</body>

</html>